<template>
  <div class="button-panel-wrapper">
    <div class="button-panel">
      {{ useUserStoreHook().username }}
      <div @click="handleBack">返回</div>
      <div @click="addFriend">添加</div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router/index";
import { useUserStoreHook } from "@/store/modules/user";

const emit = defineEmits(["addFriend"]);

const handleBack = () => {
  router.push({ name: "Welcome" });
};

// 添加好友
const addFriend = () => {
  emit("addFriend");
};
</script>

<style scoped lang="scss">
.button-panel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 45vw;
  height: 100vh;
  background: #fcfcff;
  background-blend-mode: luminosity;
  backdrop-filter: blur(100px);
  opacity: 1;

  .button-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
    backdrop-filter: blur(100px);

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 68px;
      font-size: 16px;
      color: #000;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: rgb(0 0 0 / 10%);
      }
    }
  }
}
</style>
